<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style  >
      *{
        margin: 0;
        padding: 0;
      }
      ul{

      }
      li{
        width: 100%;
        height: 200px;
        list-style: none;
        background: skyblue;
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding-left: 30px;
        box-sizing: border-box;
      }
  </style>
</head>
<body>
  <input  type="text" id="myqq" />
  <button id="toSearch">查询</button>
  <ul id="box">
   
  </ul>
  <script src="./axios.js"></script>
  <script>
    let mybtn=document.getElementById("toSearch")
    let myqq=document.getElementById("myqq");
    let box=document.getElementById("box")
    mybtn.onclick=function(){
  
        axios({
          url:"https://api.oioweb.cn/api/qq/MsgList",
          method:"get",
          data:{
            page:1,
            qq:myqq.value
          }
        }).then(res=>{
          box.innerHTML=""
          console.log(res)
          let {result,code,msg}=res;
          if(code==400){
            alert(msg)
          }else{
            result.forEach(item=>{
                  box.innerHTML+=`
                  <li>
                    <span>${item.tid}</span>
                    <div>${item.content}</div>
                    <span>${new Date(item.time).toLocaleDateString()}</span>
                  </li>
              `
            })
             
          }

        }).catch(err=>{
          console.log(err)
        }).finally(()=>{
          //  promise的finally 总是执行的函数
          console.log("你的请求操作完成了")
        })
    }
    
  </script>
</body>
</html>